<template>
  <div class="userList">
    <el-dialog

      :visible.sync="centerDialogVisible2"
      :width="selectShow?36+'%':30+'%'"
      :modal="modal"
      center>
      <el-row type="flex" justify="center" :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="搜索成员"
            v-model.trim="userName"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-button @click="getUserLsit()">查找</el-button>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between" style="margin-top: 20px">
        <el-col :span="selectShow?4:12" style="text-align: center;">成员</el-col>
        <el-col v-if="selectShow" :span="12"  style="text-align: center;"> 项目角色</el-col>
        <el-col :span="selectShow?4:12" style="text-align: center">操作</el-col>
      </el-row>
      <el-divider ></el-divider>
      <div style="margin-top: 40px;margin-left: 15px">
        <el-row type="flex" justify="space-between" style="margin-top: 20px"  v-for="(item,index) of userList">
          <el-col :span="selectShow?4:12"
                  style=" margin-bottom:14px;display: flex;justify-content: center;align-items: center">
            <div style="width: 102px;display: flex; align-items: center" >
                <div>
                    <el-avatar style="margin-right: 5px" :src="item.avatar?item.avatar:circleUrl"></el-avatar>
                </div>
                <div style="width: 50px;margin-left: 5px">
                    <span style="display: inline-block; font-size: 14px;white-space: nowrap">{{item.userName}}</span>
                </div>
            </div>

          </el-col>
          <el-col :span="12" v-if="selectShow">
            <el-select v-model="item.selectValue"  style="width: 100%" placeholder="请选择" :size="'small'">
              <el-option
                v-for="item in selectOptions"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
                style="width: 250px"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="selectShow?4:12" style="text-align: center">
            <el-button size="mini" :type="(item.userId == userId || item.flag || chooseUserIds.indexOf(item.userId) != -1) ?'primary':'' "   @click="peopleClick(item)">选择</el-button>
          </el-col>
        </el-row>
      </div>

      <el-pagination
        slot="footer"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="userPageCurrent"
        :page-size="userPageSize"
        layout="total, prev, pager, next"
        :total="usertotal">
      </el-pagination>
    </el-dialog>
    <el-button v-if="type" @click="centerDialogVisible2 = true" type="primary">添加成员</el-button>
    <el-input  v-else-if="!type && isShowSearch"  v-model="managerName" placeholder="查找负责人" :readonly='true' class="searchResponsible"  >
      <el-button slot="append" icon="el-icon-search" :disabled="status"
                 @click="centerDialogVisible2 = true"></el-button>
    </el-input>
  </div>
</template>
<script>
import {
    http_createObject_userList,
    http_createObject_getRole, http_users
} from '@/api/createObject'
    export default {
        name: 'userList',
        props: {
            status:{
                default: false
            },
            modal:{
                default:true
            },
            index:{
                default:0
            },
            name:{
                default:''
            },
            id:{
                default:''
            },
            selectShow:{
                default:false
            },
            isShowSearch: {
                default: true
            },
            type:{
                default:''
            },
            choseList:{
                default:function () {
                    return false
                }
            }

        },
        data() {
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                userPageCurrent: 0,
                userPageSize: 6,
                userList: [],
                usertotal: 0,
                managerNameId:'',
                managerName:'',
                centerDialogVisible2: false,
                userName:'',
                selectOptions:[],
                userId:'',
                selectList:[],
                chooseUserIds: []
            }
        },
        computed: {},
        mounted(){
            this.getRoleList()
            this.getUserLsit()
            if(this.id){
                this.nameFn()
                this.userId = this.id
            }
            if(this.name){
                this.managerName = this.name
            }
        },
        watch: {
            id: {
                handler(newName, oldName) {

                    this.nameFn()
                    this.userId = this.id
                },
            },
            name:{
                handler(newName, oldName) {
                    this.$nextTick(()=>{
                        this.managerName = newName

                    })
                },
            },
            choseList:{
                handler(newName,oldName){
                    this.userList.forEach((item,index)=>{
                        this.$set(item,'flag',false)
                    })
                    this.userList.forEach((item,index)=>{
                        const element = newName.find(el => el.roleId == item.userId)
                        if (element) {
                            item.flag = true
                            item.selectValue = element.jueSe
                        } else {
                            item.flag = false
                            if (item.hasOwnProperty('selectValue')) {
                                delete item.selectValue
                            }
                        }
                    })
                    this.chooseUserIds = newName.map(n=>n.userId)
                    // this.userList.forEach(item=>{
                    //    newName.forEach(n=>{
                    //        if (item.userId == n.userId){
                    //            item.selectValue = n.proroleId
                    //        }
                    //    })
                    // })

                },
                deep:true
            }
        },
        methods: {
            // 项目负责人列表
            getUserLsit() {
                http_createObject_userList({
                    pageNum: this.userPageCurrent,
                    pageSize: this.userPageSize,
                    userName:this.userName
                }).then((res) => {
                    if (res.success) {
                        this.userList = res.data.records
                        this.usertotal = res.data.total
                        if(this.choseList.length){
                            this.userList.forEach((item,index)=>{
                                this.$set(item,'flag',false)
                            })
                            this.userList.forEach((item,index)=>{
                                this.choseList.some((it,ind)=>{
                                    if(item.userId == it.roleId){
                                        item.flag = true
                                    }
                                })
                            })
                            this.userList.forEach((item,index)=>{
                                this.choseList.some((it,ind)=>{
                                    if(item.userId == it.roleId){
                                        item.flag = true
                                        // this.set(this.userList,'selectValue',it.jueSe)
                                        item.selectValue = it.jueSe
                                    }
                                })
                            })
                        }
                    } else {
                        this.$message(res.message)
                    }
                })

            },
            getRoleList() {
                http_createObject_getRole().then((res)=>{
                    this.selectOptions = res.data
                })
            },
            // 添加负责人
            peopleClick(item) {
                if(this.selectShow && !item.selectValue){
                    this.$message('请选择项目角色')
                    return
                }
                this.managerNameId = item.userId
                this.managerName = item.userName
                if(!this.choseList){
                    this.centerDialogVisible2 = false
                }
                this.selectOptions.forEach((it,index)=>{
                    if(it.id == item.selectValue){
                        item.roleName = it.roleName
                        item.proRoleId = it.id
                    }
                })
                 this.userId = item.userId
                this.$emit('handleChose', item,this.index);
            },
            handleSizeChange(val) {
                this.userPageCurrent = val
                this.getUserLsit()
            },
            handleCurrentChange(val) {
                this.userPageCurrent = val
                this.getUserLsit()
            },
            nameFn () {
                http_users().then((res) => {
                    if (res.success) {
                        var name
                        res.data.forEach((item,index)=>{
                            if(this.id == item.userId) name = item.userName
                        })
                        this.managerName = name
                        this.$emit('handleChose', {
                            userId:this.userId,
                            userName: this.managerName
                        });
                    } else {
                        this.$message(res.message)
                    }
                })
            }
        },
    }
</script>

<style scoped>
  .el-dialog__body{
    padding-top:0 !important;
  }
</style>
